<template>
	<view>
		<uni-nav-bar :fixed="true" title="本地草稿" :border="false" @clickLeft="$pageBack()" left-icon="back" background-color="#ECE6D5" :status-bar="true"></uni-nav-bar>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="take_item" @click="goInfo(item)" v-for="(item, index) in data.list" :key="index">
					<view class="img_right">
						<view class="take_user flex_jc_sb">
							<view class="u_l flex">
								<view class="flex_r">
									<view class="t2">{{ item.createTime }}</view>
								</view>
							</view>
							<view class="u_r flex_jc_cent" @click.stop="handleRemove(item)">
								<uni-icons type="trash" size="20" color="#b19561"></uni-icons>
							</view>
						</view>
						<view class="texts">
							<view class="title">{{ item.title }}</view>
							<view class="t_content">
								{{ item.content }}
							</view>
						</view>
						<view class="imglist" v-if="item.images">
							<view class="img_item" v-for="(img, ind) in item.images.split(',')" :key="ind" @click="$previewImage(item.images.split(','), ind)">
								<image :src="img" mode="aspectFill"></image>
							</view>
						</view>
						<view class="hd" v-if="item.activity">
							<image src="/static/q.png" mode=""></image>
							{{ item.activity.name }}
						</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
		<uni-popup ref="popupRef" type="center">
			<view class="globalPopup">
				<uni-icons type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">提示</view>
				<view class="content">删除该内容？</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1">取消</view>
					<view class="bt b2">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { articleDraftList, articleDraftRemove } from '@/api/community.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm } from '@/utils/common.js';
// 所有数据都定义在 data 中
const data = reactive({
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};

// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await articleDraftList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};

const handleRemove = (item) => {
	showConfirm('是否要删除当前草稿?').then((res) => {
		if (res.confirm) {
			articleDraftRemove({ id: item.id }).then((res) => {
				if (res.code == 200) {
					toast('已删除');
					data.queryParams.pageNum = 1; // 重置页码
					getList();
				}
			});
		}
	});
};
// 跳转活动发布
const goInfo = (item) => {
	uni.navigateTo({
		url: `/pages/community/release?sendType=set&&id=${item.id}`
	});
};
onLoad(() => {
	getList();
});
// 上拉加载更多
onReachBottom(() => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}

.content {
	width: 100%;
	margin: 20rpx auto;
	position: relative;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.take_item {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.img_right {
			.take_user {
				.u_l {
					.flex_r {
						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #8f8f8b;
						}
					}
				}
				.u_r {
				}
			}
			.texts {
				.take_text {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1b1b1b;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #1b1b1b;
					margin-top: 20rpx;
				}
				.t_content {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1b1b1b;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4; //几行就填几
					-webkit-box-orient: vertical;
					white-space: pre-wrap;
				}
			}

			.imglist {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				.img_item {
					width: 156rpx;
					height: 156rpx;
					margin-right: 14rpx;
					position: relative;
					image {
						width: 156rpx;
						height: 156rpx;
						border-radius: 12rpx;
					}
				}
				.img_item:nth-child(4n) {
					margin-right: 0rpx;
				}
				.item_ads {
					width: 156rpx;
					height: 156rpx;
					position: absolute;
					top: 0%;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 12rpx;
				}
			}
			.take_tips {
				margin-top: 20rpx;
				width: 596rpx;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				line-height: 70rpx;
			}
			.take_title {
				margin-top: 20rpx;
				width: 596rpx;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				line-height: 70rpx;
				.t_l {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1b1b1b;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.take_img {
				margin-top: 20rpx;
				width: 596rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				image {
					width: 80rpx;
					height: 80rpx;
					background: #dfdfdf;
					border-radius: 8rpx;
				}
				.flex_r {
					margin-left: 16rpx;
					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #1b1b1b;
					}
					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #979797;
						margin-top: 15rpx;
					}
				}
			}

			.hd {
				margin: 20rpx 0rpx;
				height: 52rpx;
				background: #eee8d8;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				padding: 0rpx 24rpx;
				line-height: 52rpx;
				box-sizing: border-box;
				display: inline-block;
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #75613e;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
